<template>
  <div class="route-detail" v-loading="loading">
    <!-- 封面区域 -->
    <div class="route-cover">
      <div class="breadcrumb-nav">
        <div class="container">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/routes' }"
              >精品路线</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{ routeData.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div
        class="cover-image"
        :style="{ backgroundImage: `url(${getImageUrl(routeData.imageUrl)})` }"
      >
        <div class="cover-gradient">
          <div class="container">
            <div class="cover-content">
              <div class="content-wrapper">
                <div class="title-section">
                  <div class="meta-tags">
                    <div
                      class="theme-tag"
                      :style="getTagStyle(routeData.theme)"
                    >
                      <el-icon class="tag-icon"><Picture /></el-icon>
                      {{ routeData.theme }}
                    </div>
                    <div class="duration-tag">
                      <el-icon><Timer /></el-icon>
                      <span>{{ routeData.duration }}天</span>
                    </div>
                    <div class="booking-tag">
                      <el-icon><DocumentCopy /></el-icon>
                      <span
                        >已有{{ formatNumber(routeData.bookCount) }}人预定</span
                      >
                    </div>
                  </div>
                  <h1>{{ routeData.title }}</h1>
                  <p class="subtitle">{{ routeData.description }}</p>
                </div>
                <div class="stats-section">
                  <div class="stats-wrapper">
                    <div class="price-info">
                      <div class="price-label">起始价格</div>
                      <div class="price-value">
                        <span class="currency">¥</span>
                        {{ routeData.price }}
                      </div>
                      <div class="price-unit">起/人</div>
                    </div>
                    <div class="stats-divider"></div>
                    <div class="rating-info">
                      <div class="rating-value">{{ routeData.rating }}</div>
                      <div class="rating-stars">
                        <el-rate
                          v-model="routeData.rating"
                          disabled
                          text-color="#ff9900"
                        />
                      </div>
                      <div class="rating-count">
                        {{ formatNumber(routeData.reviewsCount) }}条点评
                      </div>
                    </div>
                  </div>
                  <el-button
                    type="primary"
                    class="book-button"
                    @click="handleBooking"
                  >
                    立即预订
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <div class="container">
        <el-row :gutter="30">
          <!-- 左侧内容区 -->
          <el-col :lg="16" :md="24">
            <!-- 行程亮点卡片 -->
            <section class="content-card features-section">
              <div class="section-header with-bg">
                <el-icon><Star /></el-icon>
                <h2>行程亮点</h2>
              </div>
              <div class="section-content">
                <div class="features-grid">
                  <div
                    v-for="(feature, index) in routeData.features"
                    :key="index"
                    class="feature-item"
                    :style="getFeatureItemStyle(index)"
                  >
                    <div class="feature-icon">
                      <el-icon :size="24" color="white"><Check /></el-icon>
                    </div>
                    <div class="feature-content">
                      <p>{{ feature }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- 行程日程卡片 -->
            <section class="content-card">
              <div class="card-header">
                <div class="header-icon">
                  <el-icon><Calendar /></el-icon>
                </div>
                <h2>行程安排</h2>
                <span class="header-tag">{{ routeData.duration }}天行程</span>
              </div>
              <div class="card-body">
                <div class="timeline-wrapper">
                  <div
                    v-for="day in routeData.itineraries"
                    :key="day.dayNumber"
                    class="timeline-item"
                  >
                    <div class="timeline-date">
                      <span class="day-number">Day {{ day.dayNumber }}</span>
                      <div class="date-line"></div>
                    </div>
                    <div class="timeline-content">
                      <h3>{{ day.title }}</h3>
                      <p>{{ day.description }}</p>
                      <div class="timeline-tags">
                        <el-tag
                          v-for="(tag, idx) in day.highlights"
                          :key="idx"
                          :style="getTagStyle(idx)"
                        >
                          {{ tag }}
                        </el-tag>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- 添加相关目的地section -->
            <section
              v-if="routeData.destinationInfo"
              class="content-card destination-section"
            >
              <div class="section-header with-bg">
                <el-icon><Location /></el-icon>
                <h2>相关目的地</h2>
              </div>
              <div class="section-content">
                <div class="destination-card">
                  <div
                    class="destination-item"
                    @click="viewDestination(routeData.destinationInfo.id)"
                  >
                    <div class="destination-image">
                      <img
                        :src="getImageUrl(routeData.destinationInfo.imageUrl)"
                        :alt="routeData.destinationInfo.name"
                      />
                    </div>
                    <div class="destination-info">
                      <h3>{{ routeData.destinationInfo.name }}</h3>
                      <p class="destination-desc">
                        {{
                          routeData.destinationInfo.description || "暂无描述"
                        }}
                      </p>
                      <div class="destination-stats">
                        <div class="stat-item">
                          <el-icon><Star /></el-icon>
                          <span>{{ routeData.destinationInfo.rating }}分</span>
                        </div>
                        <div class="stat-item">
                          <el-icon><View /></el-icon>
                          <span
                            >{{
                              formatNumber(routeData.destinationInfo.visits)
                            }}访问</span
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- 添加路线图集 -->
            <section
              v-if="routeData.gallery && routeData.gallery.length > 0"
              class="content-card gallery-section"
            >
              <div class="section-header with-bg">
                <el-icon><Picture /></el-icon>
                <h2>路线图集</h2>
              </div>
              <div class="section-content">
                <el-carousel :interval="4000" type="card" height="400px">
                  <el-carousel-item
                    v-for="(image, index) in routeData.gallery"
                    :key="index"
                  >
                    <div class="gallery-item">
                      <img :src="getImageUrl(image)" :alt="routeData.title" />
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </section>

            <!-- 优化交通住宿区域 -->
            <section class="content-card service-section">
              <div class="section-header with-bg">
                <el-icon><Van /></el-icon>
                <h2>交通住宿</h2>
              </div>
              <div class="section-content">
                <el-row :gutter="30">
                  <el-col :md="8">
                    <div class="service-card">
                      <div class="service-icon">
                        <el-icon><Van /></el-icon>
                      </div>
                      <h3>交通说明</h3>
                      <div class="service-desc">
                        {{ routeData.trafficInfo || "暂无说明" }}
                      </div>
                    </div>
                  </el-col>
                  <el-col :md="8">
                    <div class="service-card">
                      <div class="service-icon">
                        <el-icon><House /></el-icon>
                      </div>
                      <h3>住宿说明</h3>
                      <div class="service-desc">
                        {{ routeData.accommodationInfo || "暂无说明" }}
                      </div>
                    </div>
                  </el-col>
                  <el-col :md="8">
                    <div class="service-card">
                      <div class="service-icon">
                        <el-icon><Food /></el-icon>
                      </div>
                      <h3>餐饮说明</h3>
                      <div class="service-desc">
                        {{ routeData.foodInfo || "暂无说明" }}
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </section>

            <!-- 装备建议 -->
            <section class="content-card equipment-section">
              <div class="section-header with-bg">
                <el-icon><Suitcase /></el-icon>
                <h2>装备建议</h2>
              </div>
              <div class="section-content">
                <div class="equipment-desc">
                  {{ routeData.equipmentTips || "暂无建议" }}
                </div>
                <div v-if="routeData.difficultyLevel" class="difficulty-level">
                  <h3>难度等级</h3>
                  <el-rate
                    v-model="routeData.difficultyLevel"
                    disabled
                    :colors="['#67C23A', '#E6A23C', '#F56C6C']"
                  />
                </div>
                <div
                  v-if="routeData.physicalRequirement"
                  class="physical-requirement"
                >
                  <h3>体能要求</h3>
                  <p>{{ routeData.physicalRequirement }}</p>
                </div>
              </div>
            </section>

            <!-- 费用说明 -->
            <section class="content-card cost-section">
              <div class="section-header with-bg">
                <el-icon><Wallet /></el-icon>
                <h2>费用说明</h2>
              </div>
              <div class="section-content">
                <el-row :gutter="30">
                  <el-col
                    :md="12"
                    v-for="(item, index) in costDetails"
                    :key="index"
                  >
                    <div
                      class="cost-card"
                      :class="{ included: item.type === 'include' }"
                    >
                      <div class="cost-header">
                        <el-icon :class="item.type"
                          ><component :is="item.icon"
                        /></el-icon>
                        <h3>{{ item.title }}</h3>
                      </div>
                      <ul class="cost-list">
                        <li v-for="(detail, idx) in item.details" :key="idx">
                          <el-icon><Check /></el-icon>
                          <span>{{ detail }}</span>
                        </li>
                      </ul>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </section>

            <!-- 预订须知 -->
            <section class="content-card notice-section">
              <div class="section-header with-bg">
                <el-icon><InfoFilled /></el-icon>
                <h2>预订须知</h2>
              </div>
              <div class="section-content">
                <el-collapse accordion>
                  <el-collapse-item
                    v-for="(item, index) in bookingNotes"
                    :key="index"
                    :title="item.title"
                  >
                    <div class="notice-content">{{ item.content }}</div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </section>
            <!-- 在评论区域后添加相关路线区域 -->
            <!-- 游客评价 -->
            <section class="content-card reviews-section">
              <div class="section-header with-bg">
                <el-icon><ChatDotRound /></el-icon>
                <h2>游客评价</h2>
                <span class="header-info"
                  >{{ routeData.reviewsCount || 0 }}条点评</span
                >
              </div>
              <div class="section-content">
                <div class="reviews-list">
                  <template v-if="reviews && reviews.length > 0">
                    <div class="review-items">
                      <div
                        v-for="review in reviews"
                        :key="review.id"
                        class="review-item"
                      >
                        <div class="review-header">
                          <div class="review-avatar">
                            <img
                              :src="
                                getImageUrl(
                                  review.avatar || 'default-avatar.png'
                                )
                              "
                              :alt="review.name"
                            />
                          </div>
                          <div class="review-info">
                            <h4>{{ review.name || "匿名用户" }}</h4>
                            <div class="review-rating">
                              <el-rate
                                v-model="review.rating"
                                disabled
                                show-score
                              />
                            </div>
                          </div>
                          <div class="review-date">
                            {{ formatDate(review.createTime) }}
                          </div>
                        </div>
                        <div class="review-content">
                          <p>{{ review.content }}</p>
                        </div>
                      </div>
                    </div>
                  </template>
                  <el-empty v-else description="暂无评价" />
                </div>

                <!-- 添加评论表单 -->
                <div class="add-review-section">
                  <h3>发表评价</h3>
                  <div class="review-form">
                    <div class="form-item">
                      <div class="form-label">评分</div>
                      <el-rate v-model="newReview.rating" />
                    </div>
                    <div class="form-item">
                      <div class="form-label">评价内容</div>
                      <el-input
                        v-model="newReview.content"
                        type="textarea"
                        :rows="4"
                        placeholder="请分享您的旅行体验..."
                      />
                    </div>
                    <el-button
                      type="primary"
                      @click="submitReview"
                      :loading="submitting"
                      >提交评价</el-button
                    >
                  </div>
                </div>
              </div>
            </section>
          </el-col>

          <!-- 右侧预订区 -->
          <el-col :lg="8" :md="24">
            <div class="sticky-sidebar">
              <div class="info-card">
                <div class="card-header">
                  <div class="price-info">
                    <div class="price-label">起价</div>
                    <div class="price-value">
                      <span class="currency">¥</span>
                      <span class="amount">{{ routeData.price }}</span>
                      <span class="unit">/人起</span>
                    </div>
                  </div>
                  <div class="info-divider"></div>
                  <div class="route-info">
                    <div class="info-item">
                      <el-icon><Timer /></el-icon>
                      <span>行程天数：{{ routeData.duration }}天</span>
                    </div>
                    <div class="info-item">
                      <el-icon><Star /></el-icon>
                      <span>综合评分：{{ routeData.rating }}分</span>
                    </div>
                    <div class="info-item">
                      <el-icon><User /></el-icon>
                      <span
                        >累计出行：{{
                          formatNumber(routeData.bookCount || 0)
                        }}人</span
                      >
                    </div>
                  </div>
                </div>

                <div class="card-body">
                  <div class="contact-section">
                    <h4>在线咨询</h4>
                    <p class="contact-desc">专业顾问为您定制行程方案</p>

                    <el-button
                      type="primary"
                      class="consult-btn"
                      @click="handleConsult"
                    >
                      <el-icon><Service /></el-icon>
                      立即咨询
                    </el-button>

                    <div class="contact-phone">
                      <el-icon><Phone /></el-icon>
                      <span>咨询电话：</span>
                      <a href="tel:028-12345678">028-12345678</a>
                    </div>

                    <div class="service-time">
                      <el-icon><Clock /></el-icon>
                      <span>服务时间：09:00-21:00</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getImageUrl, formatDate, formatNumber } from "@/utils/format";
import { ElMessage } from "element-plus";
import {
  Timer,
  Star,
  Calendar,
  Location,
  Picture,
  Van,
  House,
  Food,
  Suitcase,
  Wallet,
  InfoFilled,
  ChatDotRound,
  Service,
  Phone,
  Clock,
  Check,
  User,
  DocumentCopy,
  View,
  Promotion,
} from "@element-plus/icons-vue";
import {
  getRouteById,
  getRouteReviews,
  getRelatedRoutes,
  submitRouteReview,
} from "@/api/route";
import { getDestinationDetail } from "@/api/destination";


const route = useRoute();
const router = useRouter();
const loading = ref(false);
const reviews = ref([]);
const submitting = ref(false);

// 新评论数据
const newReview = ref({
  rating: 5,
  content: "",
  name: "游客", // 可以从用户系统获取
  avatar: "default-avatar.png", // 默认头像
});

// 修改数据初始化
const routeData = ref({
  title: "",
  description: "",
  duration: 0,
  price: 0,
  imageUrl: "",
  gallery: [],
  theme: "",
  difficulty: "",
  suitable: "",
  features: [],
  bookCount: 0,
  rating: 0,
  reviewsCount: 0,
  itineraries: [],
  trafficInfo: "",
  accommodationInfo: "",
  foodInfo: "",
  equipmentTips: "",
  difficultyLevel: 0,
  physicalRequirement: "",
  destinationInfo: null,
});

const relatedRoutes = ref([]);

const fetchRouteDetail = async () => {
  loading.value = true;
  try {
    const id = route.params.id;

    const [detailRes, reviewsRes] = await Promise.all([
      getRouteById(id),
      getRouteReviews(id),
    ]);

    if (detailRes) {
      routeData.value = {
        ...routeData.value, // 保留默认值
        ...detailRes, // 合并新数据
      };

      // 处理图片数据
      if (
        routeData.value.gallery &&
        typeof routeData.value.gallery === "string"
      ) {
        routeData.value.gallery = routeData.value.gallery.split(",");
      }

      // 处理特色数据
      if (
        routeData.value.features &&
        typeof routeData.value.features === "string"
      ) {
        try {
          routeData.value.features = JSON.parse(routeData.value.features);
        } catch (e) {
          routeData.value.features = routeData.value.features.split(",");
        }
      }

      // 处理行程数据
      if (
        routeData.value.itineraries &&
        typeof routeData.value.itineraries === "string"
      ) {
        try {
          routeData.value.itineraries = JSON.parse(routeData.value.itineraries);
        } catch (e) {
          routeData.value.itineraries = [];
          console.error("解析行程数据失败:", e);
        }
      }

      // 如果没有目的地信息，尝试获取目的地详情
      if (routeData.value.destinationId && !routeData.value.destinationInfo) {
        try {
          const destinationRes = await getDestinationById(
            routeData.value.destinationId
          );
          if (destinationRes) {
            routeData.value.destinationInfo = destinationRes;
          }
        } catch (err) {
          console.error("获取目的地信息失败:", err);
        }
      }

      // 获取相关路线
      if (routeData.value.destinationId) {
        try {
          const relatedRoutesData = await getRelatedRoutes(
            routeData.value.destinationId
          );
          relatedRoutes.value = relatedRoutesData.filter(
            (r) => r.id !== parseInt(id)
          );
        } catch (err) {
          console.error("获取相关路线失败:", err);
        }
      }
    }

    if (reviewsRes) {
      // 从 records 中获取评论列表，而不是 list
      reviews.value = reviewsRes.records || [];
      // 更新评论总数
      if (routeData.value) {
        routeData.value.reviewsCount = reviewsRes.total || 0;
      }
    }
  } catch (error) {
    console.error("获取路线详情失败:", error);
    ElMessage.error("获取数据失败，请稍后重试");
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchRouteDetail();
});

// 提交评论方法
const submitReview = async () => {
  if (!newReview.value.content) {
    ElMessage.warning("请输入评价内容");
    return;
  }

  submitting.value = true;
  try {
    await submitRouteReview(route.params.id, {
      rating: newReview.value.rating,
      content: newReview.value.content,
      name: newReview.value.name,
      avatar: newReview.value.avatar,
    });

    ElMessage.success("评价提交成功");

    // 重新获取评论
    const reviewsRes = await getRouteReviews(route.params.id);
    if (reviewsRes) {
      reviews.value = reviewsRes.list || [];
    }

    // 清空表单
    newReview.value.content = "";
    newReview.value.rating = 5;
  } catch (error) {
    console.error("提交评价失败:", error);
    ElMessage.error("提交失败，请稍后重试");
  } finally {
    submitting.value = false;
  }
};

// 添加新的工具方法
const getFeatureItemStyle = (index) => {
  const gradients = [
    "linear-gradient(135deg, #36cfc9, #13c2c2)",
    "linear-gradient(135deg, #597ef7, #2f54eb)",
    "linear-gradient(135deg, #722ed1, #531dab)",
    "linear-gradient(135deg, #f5222d, #cf1322)",
  ];
  return {
    background: gradients[index % gradients.length],
  };
};

// 修改 getTagStyle 函数实现
const getTagStyle = (themeOrIndex) => {
  // 如果是主题标签
  if (typeof themeOrIndex === "string") {
    const styles = {
      摄影创作: { bg: "#e6fffb", text: "#13c2c2" },
      户外探险: { bg: "#fff0f6", text: "#eb2f96" },
      文化体验: { bg: "#f6ffed", text: "#52c41a" },
      休闲度假: { bg: "#fff7e6", text: "#fa8c16" },
    };
    const style = styles[themeOrIndex] || { bg: "#f5f5f5", text: "#666666" };
    return {
      backgroundColor: style.bg,
      color: style.text,
      border: "none",
    };
  }

  // 如果是索引（用于高亮标签）
  const colors = [
    { bg: "#e6fffb", text: "#13c2c2" },
    { bg: "#f0f5ff", text: "#2f54eb" },
    { bg: "#f9f0ff", text: "#722ed1" },
    { bg: "#fff7e6", text: "#fa8c16" },
  ];
  const style = colors[themeOrIndex % colors.length];
  return {
    backgroundColor: style.bg,
    color: style.text,
    border: "none",
  };
};

// 添加处理预订和咨询的方法
const handleBooking = () => {
  ElMessage.info("预订功能开发中...");
};

const handleConsult = () => {
  ElMessage.info("咨询功能开发中...");
};

// 跳转到目的地详情页
const viewDestination = (id) => {
  router.push(`/destination/${id}`);
};

// 添加费用说明数据
const costDetails = [
  {
    type: "include",
    icon: "Check",
    title: "费用包含",
    details: [
      "全程住宿(2-3人间标准间)",
      "行程中所列餐食",
      "当地专业中文导游服务",
      "投保旅行社责任险",
      "景区首道门票",
    ],
  },
  {
    type: "exclude",
    icon: "Close",
    title: "费用不含",
    details: [
      "往返交通费用",
      "个人消费",
      "未列入行程的景点门票",
      "行李搬运费",
      "导游服务费",
    ],
  },
];

// 添加预订须知数据
const bookingNotes = [
  {
    title: "预订说明",
    content:
      "请至少提前3天预订,以便我们更好地为您安排行程。旺季请尽量提前7天以上预订。",
  },
  {
    title: "退改政策",
    content:
      "出发前7天以上取消,扣除订单总额的10%;出发前3-7天取消,扣除订单总额的30%;出发前3天内取消,扣除订单总额的50%。",
  },
  {
    title: "出行须知",
    content:
      "请携带有效身份证件;建议自备常用药品;请着装得体,适合徒步的运动鞋服;贵重物品请自行保管。",
  },
];
</script>

<style scoped>
.route-cover {
  height: 85vh;
  min-height: 500px;
  max-height: 800px;
  position: relative;
}

.breadcrumb-nav {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 10;
}

.el-breadcrumb {
  --el-text-color-regular: rgba(255, 255, 255, 0.9);
  --el-text-color-primary: #fff;
  font-size: 0.95rem;
}

.cover-image {
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}

.cover-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
  display: flex;
  align-items: flex-end;
}

.cover-content {
  width: 100%;
  color: white;
  padding: 60px 0;
}

.content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.title-section {
  flex: 1;
  max-width: 800px;
}

.meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 25px;
}

.theme-tag,
.duration-tag,
.booking-tag {
  height: 32px;
  padding: 0 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  backdrop-filter: blur(10px);
}

.theme-tag {
  background: rgba(255, 255, 255, 0.3);
}

.duration-tag,
.booking-tag {
  background: rgba(255, 255, 255, 0.2);
}

.tag-icon {
  font-size: 16px;
}

.title-section h1 {
  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 20px;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin: 0;
  max-width: 600px;
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

.stats-section {
  min-width: 300px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 25px;
}

.stats-wrapper {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.price-info,
.rating-info {
  flex: 1;
  text-align: center;
}

.price-label,
.rating-count {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 5px;
}

.price-value {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 5px;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.currency {
  font-size: 1.2rem;
  margin-right: 2px;
}

.price-unit {
  font-size: 0.9rem;
  opacity: 0.8;
}

.rating-value {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 8px;
  color: #ff9900;
}

.book-button {
  width: 100%;
  height: 48px;
  font-size: 1.1rem;
  border-radius: 24px;
  background: linear-gradient(45deg, var(--primary-color), #36cfc9);
  border: none;
  transition: all 0.3s ease;
}

.book-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* 评论区样式 */
.reviews-list {
  margin-bottom: 30px;
}

.review-item {
  background: var(--light-bg);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.review-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-info {
  flex: 1;
}

.review-info h4 {
  margin: 0 0 5px;
  font-size: 1rem;
  color: var(--text-color);
}

.review-date {
  color: var(--text-color-secondary);
  font-size: 0.9rem;
}

.review-content {
  color: var(--text-color);
  line-height: 1.6;
}

.add-review-section {
  background: var(--light-bg);
  border-radius: 12px;
  padding: 25px;
}

.add-review-section h3 {
  margin: 0 0 20px;
  font-size: 1.2rem;
  color: var(--text-color);
}

.form-item {
  margin-bottom: 20px;
}

.form-label {
  margin-bottom: 10px;
  color: var(--text-color);
  font-weight: 500;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .route-cover {
    height: auto;
    min-height: 100vh;
  }

  .breadcrumb-nav {
    top: 15px;
    padding: 0 15px;
  }

  .cover-content {
    padding: 30px 15px;
  }

  .content-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  .title-section h1 {
    font-size: 2rem;
    margin-bottom: 15px;
  }

  .subtitle {
    font-size: 1rem;
    margin-bottom: 20px;
  }

  .meta-tags {
    gap: 8px;
    margin-bottom: 20px;
  }

  .theme-tag,
  .duration-tag,
  .booking-tag {
    height: 28px;
    padding: 0 12px;
    font-size: 0.9rem;
  }

  .stats-section {
    width: 100%;
    min-width: auto;
    border-radius: 16px;
    padding: 20px;
  }

  .stats-wrapper {
    margin-bottom: 15px;
    padding-bottom: 15px;
  }

  .price-value,
  .rating-value {
    font-size: 1.8rem;
  }

  .book-button {
    height: 44px;
    font-size: 1rem;
  }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
  .title-section h1 {
    font-size: 1.8rem;
  }

  .meta-tags {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-wrapper {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .stats-divider {
    display: none;
  }
}

.main-content {
  padding: 60px 0;
  background: var(--light-bg);
}

.content-section {
  background: white;
  border-radius: var(--border-radius);
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: var(--box-shadow);
}

.content-section h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--text-color);
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.feature-tag {
  padding: 8px 16px;
  font-size: 1rem;
}

.feature-content {
  line-height: 1.8;
  color: var(--text-color-secondary);
}

.timeline-content h3 {
  color: var(--primary-color);
  margin-bottom: 15px;
}

.schedule-item {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.time {
  min-width: 60px;
  color: var(--primary-color);
  font-weight: bold;
}

.activity h4 {
  margin-bottom: 5px;
}

.activity p {
  color: var(--text-color-secondary);
}

.cost-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.cost-item h3 {
  margin-bottom: 15px;
  color: var(--primary-color);
}

.cost-item ul {
  list-style: none;
  padding: 0;
}

.cost-item li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--text-color-secondary);
}

/* 相关路线样式 */
.related-routes-section {
  margin-top: 30px;
}

.related-route-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.related-route-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.route-image {
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.route-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.5)
  );
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.route-theme {
  display: flex;
  justify-content: flex-start;
}

.route-info {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.route-info h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.route-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-color-secondary);
  font-size: 0.9rem;
}

.meta-item.price {
  color: var(--primary-color);
  font-weight: 500;
}

.currency {
  font-size: 0.8rem;
}

.amount {
  font-size: 1.1rem;
}

.unit {
  font-size: 0.8rem;
  color: var(--text-color-secondary);
}

.booking-card,
.notice-card {
  background: white;
  border-radius: var(--border-radius);
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: var(--box-shadow);
}

.booking-price {
  text-align: center;
  margin: 20px 0;
}

.amount {
  font-size: 2rem;
  color: #ff9900;
  font-weight: bold;
}

.unit {
  color: var(--text-color-secondary);
  margin-left: 5px;
}

.booking-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.notice-item {
  margin-bottom: 20px;
}

.notice-item h4 {
  color: var(--primary-color);
  margin-bottom: 8px;
}

.notice-item p {
  color: var(--text-color-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 992px) {
  .el-col-16,
  .el-col-8 {
    width: 100%;
  }

  .cost-details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .route-cover {
    height: 50vh;
  }

  .cover-content h1 {
    font-size: 2rem;
  }

  .route-meta {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .content-section {
    padding: 20px;
  }
}

/* 添加新样式 */
.highlights-section {
  margin-bottom: 30px;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 10px;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: var(--light-bg);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.highlight-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.highlight-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.highlight-content h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-color);
}

/* 预订卡片样式 */
.booking-card {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.card-header {
  padding: 25px;
  background: linear-gradient(45deg, var(--primary-color), #36cfc9);
  color: white;
}

.price-tag {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.amount {
  font-size: 2rem;
  font-weight: bold;
}

.unit {
  font-size: 1rem;
  opacity: 0.8;
}

.card-body {
  padding: 20px;
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.input-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text-color);
}

.w-full {
  width: 100%;
}

.total-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: var(--light-bg);
  border-radius: 8px;
  margin: 20px 0;
}

.total-price .label {
  font-size: 1.1rem;
  color: var(--text-color);
}

.total-price .value {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--primary-color);
}

.submit-btn {
  width: 100%;
  height: 45px;
  font-size: 1.1rem;
}

.card-footer {
  padding: 20px;
  background: var(--light-bg);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.hotline {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color);
}

.consult-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 行程概要卡片样式 */
.summary-card {
  background: white;
  border-radius: 20px;
  padding: 25px;
  margin-top: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.summary-card h4 {
  margin: 0 0 20px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-color);
}

.summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.summary-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  color: var(--text-color-secondary);
  border-bottom: 1px dashed var(--border-color);
}

.summary-list li:last-child {
  border-bottom: none;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .highlights-grid {
    grid-template-columns: 1fr;
  }

  .booking-card {
    position: static;
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .card-header {
    padding: 15px;
  }

  .card-body {
    padding: 15px;
  }

  .amount {
    font-size: 1.8rem;
  }
}

/* 优化内容区域样式 */
.content-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.content-card:hover {
  transform: translateY(-5px);
}

.section-header.with-bg {
  background: linear-gradient(45deg, var(--primary-color), #36cfc9);
  color: white;
  padding: 20px 30px;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-header .el-icon {
  font-size: 24px;
}

.section-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.header-info {
  margin-left: auto;
  font-size: 0.9rem;
  opacity: 0.8;
}

.section-content {
  padding: 30px;
}

/* 时间轴样式优化 */
.timeline-card {
  background: var(--light-bg);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.timeline-card:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.timeline-title {
  color: var(--primary-color);
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.timeline-content {
  color: var(--text-color);
  line-height: 1.6;
  margin-bottom: 15px;
}

.timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 费用说明样式优化 */
.cost-card {
  height: 100%;
  background: var(--light-bg);
  border-radius: 12px;
  padding: 25px;
  transition: all 0.3s ease;
}

.cost-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.cost-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.cost-header .el-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.cost-header .include {
  background: var(--success-color);
}

.cost-header .exclude {
  background: var(--danger-color);
}

.cost-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-color);
}

.cost-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cost-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  color: var(--text-color);
  border-bottom: 1px dashed var(--border-color);
}

.cost-list li:last-child {
  border-bottom: none;
}

.cost-list .el-icon {
  color: var(--primary-color);
}

/* 预订须知样式优化 */
.notice-section .el-collapse {
  --el-collapse-border-color: transparent;
}

.notice-section .el-collapse-item {
  margin-bottom: 15px;
  border-radius: 8px;
  background: var(--light-bg);
  overflow: hidden;
}

.notice-section .el-collapse-item__header {
  font-size: 1.1rem;
  color: var(--text-color);
  padding: 15px 20px;
  background: white;
}

.notice-content {
  padding: 20px;
  color: var(--text-color-secondary);
  line-height: 1.8;
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-item {
    padding: 15px;
  }

  .cost-card {
    margin-bottom: 20px;
  }
}

/* 响应式优化 */
@media (max-width: 768px) {
  .section-header.with-bg {
    padding: 15px 20px;
  }

  .section-content {
    padding: 20px;
  }

  .timeline-card {
    padding: 15px;
  }

  .cost-card {
    margin-bottom: 20px;
  }
}

/* 优化预订卡片样式 */
.price-card {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 10px 10px,
    rgba(var(--primary-color-rgb), 0.03) 2px,
    transparent 0
  );
  background-size: 16px 16px;
  opacity: 0.5;
  z-index: 1;
}

.card-header {
  position: relative;
  padding: 25px;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-color-light, #36cfc9)
  );
  color: white;
  z-index: 2;
}

.header-info {
  margin-bottom: 20px;
}

.main-price {
  margin-bottom: 15px;
}

.main-price .label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.price-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.currency {
  font-size: 1rem;
}

.amount {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1;
}

.unit {
  font-size: 0.9rem;
  opacity: 0.8;
}

.stats-info {
  display: flex;
  gap: 15px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  opacity: 0.9;
}

.quick-book {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
}

.date-select,
.people-select {
  flex: 1;
}

.total-price {
  background: rgba(255, 255, 255, 0.1);
  padding: 12px;
  border-radius: 8px;
}

.calc-info {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 6px;
}

.final-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.final-price .price {
  font-size: 1.6rem;
  font-weight: bold;
}

.card-body {
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2;
}

.book-btn,
.consult-btn {
  height: 44px;
  border-radius: 22px;
  font-size: 1rem;
}

.consult-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* 移动端适配优化 */
@media (max-width: 768px) {
  .service-card {
    margin-bottom: 15px;
  }

  .price-card {
    margin: 0 -15px;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
  }

  .card-header {
    padding: 15px;
  }

  .quick-book {
    flex-direction: column;
    gap: 10px;
  }

  .book-btn,
  .consult-btn {
    height: 40px;
    font-size: 0.95rem;
  }
}

/* 优化交通住宿区域样式 */
.service-card {
  background: var(--light-bg);
  border-radius: 16px;
  padding: 25px;
  height: 100%;
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.service-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  color: var(--primary-color);
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.service-card h3 {
  font-size: 1.1rem;
  margin: 0 0 12px;
  color: var(--text-color);
}

.service-desc {
  color: var(--text-color-secondary);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* 优化预订卡片样式 */
.price-card {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 10px 10px,
    rgba(var(--primary-color-rgb), 0.03) 2px,
    transparent 0
  );
  background-size: 16px 16px;
  opacity: 0.5;
  z-index: 1;
}

.card-header {
  position: relative;
  padding: 25px;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-color-light, #36cfc9)
  );
  color: white;
  z-index: 2;
}

.header-info {
  margin-bottom: 20px;
}

.main-price {
  margin-bottom: 15px;
}

.main-price .label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.price-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.currency {
  font-size: 1rem;
}

.amount {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1;
}

.unit {
  font-size: 0.9rem;
  opacity: 0.8;
}

.stats-info {
  display: flex;
  gap: 15px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  opacity: 0.9;
}

.quick-book {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
}

.date-select,
.people-select {
  flex: 1;
}

.total-price {
  background: rgba(255, 255, 255, 0.1);
  padding: 12px;
  border-radius: 8px;
}

.calc-info {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 6px;
}

.final-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.final-price .price {
  font-size: 1.6rem;
  font-weight: bold;
}

.card-body {
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2;
}

.book-btn,
.consult-btn {
  height: 44px;
  border-radius: 22px;
  font-size: 1rem;
}

.consult-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* 移动端适配优化 */
@media (max-width: 768px) {
  .service-card {
    margin-bottom: 15px;
  }

  .price-card {
    margin: 0 -15px;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
  }

  .card-header {
    padding: 15px;
  }

  .quick-book {
    flex-direction: column;
    gap: 10px;
  }

  .book-btn,
  .consult-btn {
    height: 40px;
    font-size: 0.95rem;
  }
}

/* 新增样式 */
.info-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  position: relative; /* 改为 relative */
}

.card-header {
  background: linear-gradient(135deg, var(--primary-color), #36cfc9);
  color: white;
  padding: 25px;
}

.price-info {
  text-align: center;
  margin-bottom: 20px;
}

.price-label {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 5px;
}

.price-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.currency {
  font-size: 1.2rem;
}

.amount {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1;
}

.unit {
  font-size: 1rem;
  opacity: 0.8;
}

.info-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 20px 0;
}

.route-info {
  display: grid;
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}

.contact-section {
  text-align: center;
  padding: 25px;
}

.contact-section h4 {
  font-size: 1.2rem;
  color: var(--text-color);
  margin-bottom: 8px;
}

.contact-desc {
  color: var (--text-color-secondary);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.consult-btn {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  font-size: 1rem;
  margin-bottom: 20px;
}

.contact-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--text-color);
}

.contact-phone a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.service-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-color-secondary);
  font-size: 0.9rem;
}

.card-footer {
  padding: 20px;
  background: var(--light-bg);
  text-align: center;
}

.qr-code img {
  width: 120px;
  height: 120px;
  margin-bottom: 8px;
  border-radius: 8px;
}

.qr-code p {
  font-size: 0.9rem;
  color: var(--text-color-secondary);
}

/* 移动端适配 */
@media (max-width: 992px) {
  .info-card {
    position: static;
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .info-card {
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 90;
  }

  .card-header {
    padding: 15px;
  }

  .card-body {
    padding: 15px;
  }

  .card-footer {
    display: none;
  }

  .consult-btn,
  .phone-btn {
    height: 40px;
    font-size: 0.95rem;
  }
}

.contact-section {
  text-align: center;
}

.contact-section h4 {
  font-size: 1.2rem;
  color: var(--text-color);
  margin-bottom: 8px;
}

.contact-desc {
  color: var(--text-color-secondary);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.consult-btn {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  font-size: 1rem;
  margin-bottom: 20px;
}

.contact-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--text-color);
}

.contact-phone a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.service-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-color-secondary);
  font-size: 0.9rem;
}

/* 修改右侧固定定位相关样式 */
.sticky-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  height: fit-content; /* 添加这行 */
}

@media (max-width: 768px) {
  .sticky-sidebar {
    position: static;
  }

  .info-card {
    position: static; /* 改为静态定位 */
    border-radius: 16px; /* 保持圆角 */
    margin: 20px 0; /* 添加上下间距 */
  }

  .card-header {
    padding: 20px;
  }

  .card-body {
    padding: 20px;
  }
}

/* 修改面包屑样式 */
.breadcrumb-nav {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 10;
}

.el-breadcrumb {
  --el-text-color-regular: rgba(255, 255, 255, 0.9);
  --el-text-color-primary: #fff;
  font-size: 0.95rem;
}

/* 优化行程亮点样式 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 10px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  padding: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-content {
  flex: 1;
}

.feature-content p {
  margin: 0;
  color: white;
  font-size: 1rem;
  line-height: 1.5;
}

/* 添加相关目的地样式 */
.destination-section {
  margin-bottom: 30px;
}

.destination-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: var(--light-bg);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.destination-item:hover {
  transform: translateX(5px);
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.destination-image {
  width: 200px;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
}

.destination-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.destination-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.destination-info h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
  color: var(--text-color);
}

.destination-desc {
  color: var(--text-color-secondary);
  margin-bottom: 15px;
  line-height: 1.6;
}

.destination-stats {
  display: flex;
  gap: 20px;
  margin-top: auto;
}

.destination-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-color-secondary);
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .destination-item {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
  }

  .destination-image {
    width: 100%;
    height: 180px;
  }

  .destination-info h3 {
    font-size: 1.2rem;
  }
}
</style>
